<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>18.8 计算属性 </title>

		<style>
			input[type="text"] {
				height: 30px;
				width: 300px;
				margin-bottom: 10px;
				border-radius: 5px;
				padding: 2px;
				font-size: 16px;

			}

			button {
				width: 100px;
				height: 40px;
			}

			input {
				height: 36px;

			}

			pre {
				background-color: beige;
				display: inline-block;
			}
		</style>

	</head>

	<body>

		<!-- 

		18.8 计算属性 

		computed：{
			
		}



	 -->
		<div id="app">

			<table border="1px">
				<thead>
					<th>学科</th>
					<th>成绩</th>
				</thead>
				<tbody>
					<tr>
						<td>数学</td>
						<td>
							<input type="text" v-model.number="math"> {{math}}
						</td>
					</tr>

					<tr>
						<td>英语</td>
						<td>
							<input type="text" v-model.number="english">
							{{english}}
						</td>

					</tr>

					<tr>
						<td>物理</td>
						<td>
							<input type="text" v-model.number="physics">
							{{physics}}
						</td>
					</tr>
					<tr>
						<td>总分</td>
						<td>{{sum}}</td>
					</tr>

					<tr>
						<td>平均分</td>
						<td>{{ avg}}</td>
					</tr>
				</tbody>

			</table>



		</div>


		<script src="../lib/vue.js"></script>
		<script src="js/main.js"></script>

	</body>

</html>
